  /* 内容 */
  #content{
    width:660px;
    height:480px;
    position: fixed;
    top:50%;
    left:50%;
    margin-top:-240px;
    margin-left:-330px;
  }
  /* 主界面 */
  #main{
    float:left;
    position: relative;
    width:480px;
    height:480px;
    background:#000;
  }
  /* 面板 */
  #menu{
    float:left;
    width:180px;
    height:480px;
    background:#DADCDF;
  }
  .game-title{
    font-size:32px;
    text-align:center;
    color:blue;
  }
  .info{
    padding:0 15px;
  }
  .info .label{
    font-size:21px;
  }
  .info .value{
    margin-bottom:10px;
    font-size:24px;
    color:red;
  }
  .explain{
    font-size:15px;
    padding:15px;
  }
  /* 蛇身 */
  .snake{
    position:absolute;
    z-index:10;
    width:30px;
    height:30px;
    background:rgb(2, 77, 2);
  }
  /* 蛇眼嘴 */
  .snake .eye,.snake .mouth{
    position: absolute;
  }
  .snake .eye{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#fff;
  }
  .snake .eye .eyeball{
    position: relative;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#000;
  }
  .snake .over-eye{
    display:none;
  }
  .snake.over .eye{
    display:none;
  }
  .snake.over .over-eye{
    display:block;
    position: absolute;
    top:0;
    left:0;
    line-height:1;
    font-weight:600;
    color:#000;
  }
  .snake.over.top .left-over-eye{
    top: -1px;
    left: -2px;
  }
  .snake.over.bottom .left-over-eye{
    top: 10px;
    left: -1px;
  }
  .snake.over.left .left-over-eye{
    top: 16px;
    left: 2px;
  }
  .snake.over.right .left-over-eye{
    top: -4px;
    left: 15px;
  }
  .snake.over.top .right-over-eye{
    top: -1px;
    left: 19px;
  }
  .snake.over.bottom .right-over-eye{
    top: 10px;
    left: 19px;
  }
  .snake.over.left .right-over-eye{
    top: -4px;
    left: 2px;
  }
  .snake.over.right .right-over-eye{
    top: 16px;
    left: 15px;
  }
  .snake .mouth{
    background:red;
  }
  .snake.top .left-eye{
    top: 2px;
    left: 0;
  }
  .snake.bottom .left-eye{
    top: 20px;
    left: 0;
  }
  .snake.left .left-eye{
    top:22px;
    left:2px;
  }
  .snake.right .left-eye{
    top: 0;
    left: 20px;
  }
  .snake.top .right-eye{
    top: 2px;
    left: 21px;
  }
  .snake.bottom .right-eye{
    top: 20px;
    left: 22px;
  }
  .snake.left .right-eye{
    top:0;
    left:2px;
  }
  .snake.right .right-eye{
    top: 22px;
    left: 20px;
  }
  .snake.top .eye .eyeball{
    top: 1px;
    left: 2px;
  }
  .snake.bottom .eye .eyeball{
    top: 3px;
    left: 2px;
  }
  .snake.left .eye .eyeball{
    top: 2px;
    left: 1px;
  }
  .snake.right .eye .eyeball{
    top: 2px;
    left: 3px;
  }
  .snake.top .mouth{
    top:0;
    left:10px;
    width:10px;
    height:5px;
  }
  .snake.bottom .mouth{
    top: 25px;
    left: 10px;
    width:10px;
    height:5px;
  }
  .snake.left .mouth{
    top:10px;
    left:0;
    width:5px;
    height:10px;
  }
  .snake.right .mouth{
    top: 10px;
    left: 25px;
    width:5px;
    height:10px;
  }
  /* 食物 */
  #food{
    position:absolute;
    width:30px;
    height:30px; 
  }
  #food>div{
    position: absolute;
    top:7.5px;
    left:7.5px;
    width:15px;
    height:15px;
    border-radius:50%;
    background:red;
  }
  /* 蒙版 */
  #masking{
    text-align:center;
    position: absolute;
    z-index:1000;
    top:0;
    left:0;
    width:480px;
    height:100%;
    background:rgba(255,255,255,.6);
  }
  #masking.show{
    display:block;
  }
  #masking.hide{
    display:none;
  }
  #masking-title{
    font-size:48px;
  }
  #masking-explain{

  }
  #masking-btn{
    cursor: pointer;
    margin-top:20px;
    font-size:21px;
  }